<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">

          <a-col :md="8" :sm="24">
            <a-form-item label="产品名称">
              <a-input v-model="queryParam.materialId" placeholder="请输入产品名称"/>
            </a-form-item>
          </a-col>

<!--          <a-col :md="8" :sm="24">-->
<!--            <a-form-item label="物料类型">-->
<!--&lt;!&ndash;              <a-input v-model="queryParam.materialType" placeholder="请输入物料类型"/>&ndash;&gt;-->
<!--              <a-select :default-value="materialType" v-model="queryParam.materialType"-->
<!--                        style="width: 120px">-->
<!--                <a-select-option :value="item.id" v-for="(item, index) in materialTypeList">-->
<!--                  {{ item.name }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <!--<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
            </span>
          </a-col>

          <a-col :md="24" :sm="24">
            <a-form-item label="归属公司：">
              <FCOrgRadioGroup v-model="queryParam.orgIdCompany"
                               :filter-types="[$businessEnum.ORG_TYPE_ENUM.COMPANY.id]"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" @click="$refs.deliverOrderAddForm.add({orderType:ORDER_TYPE_ENUM.inOrder.id, selectedRows})" icon="plus">
        提交发货单
      </a-button>
      <router-link :to="{name:'ems_matrial_product_base'}">
        <a-button type="primary" icon="plus">新增</a-button>
      </router-link>
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="(record) => record.code"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <!-- <span slot="image" slot-scope="text">
				<image-preview :images="text" />
      </span> -->
      <span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
      <span slot="action" slot-scope="text, record">
        <a @click="$refs.editForm.edit(record)">编辑</a>
        <a-divider type="vertical"/>
        <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>

    <deliver-order-add-form ref="deliverOrderAddForm" @ok="handleOk"/>
    <ems-material-pool-edit-form ref="editForm" @ok="handleOk"/>
  </a-card>
</template>

<script>
import {STable} from '@/components'
import {del, page} from '@/api/modular/main/emsmaterialpool/emsMaterialPoolManage'
import deliverOrderAddForm from './deliverOrderAddForm'
import {getUrlParam, MATERIAL_TYPE_ENUM, ORDER_TYPE_ENUM} from '@/utils/util'
import {list as emsOrgList} from '@/api/modular/main/emsorg/emsOrgManage'
import FCOrgRadioGroup from '@/components/FcOrgRadioGroup/FCOrgRadioGroup'
import EmsMaterialPoolEditForm from './editForm'

export default {
    components: {
      FCOrgRadioGroup,
      STable,
      deliverOrderAddForm,
      EmsMaterialPoolEditForm,
    },

    data() {
      return {
        advanced: false, // 高级搜索 展开/关闭
        queryParam: {},  // 查询参数
        columns: [       // 表头
          {
            title: '序号', width:'80px',
            dataIndex: 'materialId',
            customRender: (text,record,index) => `${index+1}`,
          },
          {
            title: '物料',
            dataIndex: 'materialName'
          },
          {
            title: '料号',
            dataIndex: 'materialCode'
          },
          {
            title: '归属公司',
            dataIndex: 'orgIdCompanyName'
          },
          {
            title: '规格',
            dataIndex: 'materialModelNumber'
          },
          {
            title: '图片',
            dataIndex: 'image',
            // customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
            scopedSlots: {customRender: 'image'}
          },
          {
            title: '库存',
            dataIndex: 'inventoryNumber'
          },
          {
            title: '数量',
            dataIndex: 'number'
          },
          {
            title: '备注',
            dataIndex: 'remark'
          },
          {
            title: '库位备注',
            dataIndex: 'storehousePositionRemark'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.queryParam.materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id
          this.queryParam.poolType = this.$businessEnum.ORDER_TYPE_ENUM.deliverOrder.id
          return page(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        defaultExpandedKeys: [],
        replaceFields: {
          key: 'id',
        },
        suppliers: [],
      }
    },
    computed: {
      urlParam() {
        return getUrlParam(this.$route.path)
      },
      poolType() {
        return this.urlParam.poolType;
      },
      materialType() {
        return this.urlParam.materialType;
      },
      ORDER_TYPE_ENUM() {
        return ORDER_TYPE_ENUM;
      },
      materialTypeList() {
        let value = [{id: '', name: '全部', code: 'all'}]
        for (const key in MATERIAL_TYPE_ENUM) {
          value.push(MATERIAL_TYPE_ENUM[key])
        }
        return value
      }
    },
    watch: {
      '$route.path': function () {
        console.log(`watch`)
        this.queryParam.materialType = this.urlParam.materialType

        setTimeout(() => {
          this.$refs.table.refresh(true)
          this.selectedRowKeys.length = 0
          this.selectedRows.length = 0
        }, 100)
      }
    },
    created() {
      this.queryParam = {materialType: this.urlParam.materialType}
    },
    methods: {
      del(record) {
        del(record).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      handleOk() {
        this.$refs.table.refresh()
        this.selectedRowKeys.length = 0
        this.selectedRows.length = 0
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleMaterialTypeSelectChange(value) {
        // this.queryParam = Object.assign({}, this.queryParam, {materialType: value})
        this.queryParam.materialType = value
      },
      getSuppliers() {
        emsOrgList({pid: '1473297518794452994', unitRanId: this.$businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id}).then((res) => {
          this.suppliers = res.data
        })
      },
    }
  }
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
